<template>
  <!-- <el-rate
    v-model="changeValue"
    v-bind="{...item}"
    @change="handleChange"
  /> -->
  <div @keydown="handleKey" class="wrap" :style="handleWidth()">
      <span 
      style="display:inline-block"
        v-for="num in item.max" :key="'rate'+num" 
        @click="handleChange(num)" 
        @mousemove="setCurrentValue(num, $event)"
        @mouseleave="resetCurrentValue"
      >
      <span :class="['numItem',{ 'hover': hoverIndex === num && !showDecimalIcon(num)}]"
      :style="getIconStyle(num)">
        <span class="number">{{ num }}</span>
        <i v-if="showDecimalIcon(num)"
          :style="decimalStyle"
          class="rate__decimal">
        </i>
      </span>
      </span>
  </div>
</template>

<script>
import mixin from '../mixin'

export default {
  name: 'TRate',
  mixins: [mixin],
  data() {
    return {
      oldValue: null,
      currentValue:this.value,
      hoverIndex: -1,
      pointerAtLeftHalf: true,
    }
  },
  watch: {
      value(val) {
        this.currentValue = val
        this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
      }
    },
  computed: {
    //高亮半星时添加的样式，颜色以及宽度
    decimalStyle() {
        let width = '';
        
        if (this.item['allow-half']) {
          width = '50%';
        }
        return {
          background: '#4F78EE',
          height:'25px',
          width
        };
    },
  },
  methods: {
    handleWidth() {
      if(this.item.max < 10 || this.item.max == 10){
        return "width:300px";
      }else if(this.item.max > 10 && this.item.max < 20){
        var num =Math.ceil(this.item.max/2)
        return "width:"+num*30+'px';
      }else if(this.item.max == 20 || this.item.max > 20){
        return "width:300px";
      }
      
      
    },
    //返回当前星图标的颜色
    getIconStyle(num) {
        return {
          color:'#fff',
          //判断当前星是显示高亮的颜色还是未选中时的颜色
          background: num <= this.currentValue ? '#4F78EE' : "#C6D1DE"
        };
      },
      handleChange(val) {
          // 重复点击说明是想取消
          if (this.item['allow-half'] && this.pointerAtLeftHalf) {
            this.changeValue = this.currentValue;
          } else { //当不显示半星直接返回value
            this.changeValue = val;
          }
      },
      //当按键按下时所调用的方法
      handleKey(e) {
          let currentValue = this.currentValue;
          const keyCode = e.keyCode;
          //当按上下左右键的时候，允许半选则在currentValue加或减0.5，不允许则加或减1
          if (keyCode === 38 || keyCode === 39) { // up / right
              if (this.item['allow-half']) {
              currentValue += 0.5;
              } else {
              currentValue += 1;
              }
              e.stopPropagation();
              e.preventDefault();
          } else if (keyCode === 37 || keyCode === 40) { // left /down
              if (this.item['allow-half']) {
              currentValue -= 0.5;
              } else {
              currentValue -= 1;
              }
              e.stopPropagation();
              e.preventDefault();
          }
          currentValue = currentValue < 0 ? 0 : currentValue;
          currentValue = currentValue > this.item.max ? this.item.max : currentValue;
          //将currentValue通过input传递给子组件绑定的v-model值，触发change事件，子组件可以change在获取改变后的值
          this.changeValue =currentValue
          // this.$emit('input', currentValue);
          // this.$emit('change', currentValue);
      },
      //鼠标移动时改变评星的值
      setCurrentValue(value, event) {

          /* istanbul ignore if */
          if (this.item['allow-half']) {
              let target = event.target;
              console.log(this.pointerAtLeftHalf,value,'item')
              //鼠标移动到包裹星星图标的span标签时，获取到显示星的icon标签
              // if (hasClass(target, 'el-rate__item')) {
              // target = target.querySelector('.el-rate__icon');
              // }
              // if (hasClass(target, 'el-rate__decimal')) {
              // target = target.parentNode;
              // }
              //根据鼠标移到一颗星的左边一半以内的位置，则减去当前值的0.5，否则就是等于当前值
              this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
              this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
          } else {
              //不允许半选时，鼠标移到那颗星就等于当前的值
              this.currentValue = value;
          }
          //记录鼠标移动的位置
          this.hoverIndex = value;
          
      },
      //鼠标移出时设置当前的值
      resetCurrentValue() {
          if (this.item['allow-half']) {
              //如果当前的value是小数，pointerAtLeftHalf为true，如果是整数则为false,这里主要是为了点击时用来判断传哪个值
              this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
          }
          //鼠标移上去时currentValue会改变，移走时currentValue等于之前的value
          this.currentValue = this.value;
          this.hoverIndex = -1;
      },
      showDecimalIcon(value) {
        //这里主要也是判断是否当前星是否应显示半星
        let showWhenAllowHalf = this.item['allow-half'] &&
          this.pointerAtLeftHalf &&
          value - 0.5 <= this.currentValue &&
          value > this.currentValue;
        return showWhenAllowHalf;
      },
  }
}
</script>

<style scoped>

.numItem{
  width: 24px;
  height: 24px;
  background: #eff2f7;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #ECECEC;
  display: inline-block;
  text-align:center;
  margin-right:6px;
  line-height: 24px;
  cursor: pointer;
  position:relative;
}
.numActive{
  background: #4F78EE;
  border: 1px solid #1E4FDB;
  color:#fff
}
.hover{
  background: #4F78EE;
  border: 1px solid #1E4FDB;
  color:#fff
}
.rate__decimal {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index:1;
    border-radius: 4px 0px 0px 4px;
}
.number{
  position: relative;
  top: 0%; 
  left: 0%; 
  transform: translate(-50%, -50%);
  z-index:3;
}
</style>